<template>
	<div id="app" class="chatBody" ref="idChatBody">
		<div class="chatArea">
			<div v-for="(item, index) in allMessage" :key="index">
				<div v-if="item.from == 1" style="width:100%;float: left;">
					<span class="userChatGround">{{ item.content }}</span>
				</div>
				<!-- 客服回答 -->
				<div v-if="item.from == 2" class="assistantChatItem">
					<div v-if="item.loading==0" v-html="item.content"></div>
					<div v-else>我在思考中……</div>
				</div>
			</div>
		</div>
		<div class="inputSendGround">
			<div class="inputSendGround_area">
				<input v-model="userQuestion" @keyup.enter="send" class="inputSendGround_area_input" />
				<button class="sendButton" @click="send">发送</button>
			</div>
		</div>
	</div>
</template>

<script>
	import {fetchEventSource} from '@microsoft/fetch-event-source';

	export default {
		name: 'App',
		components: {},
		data() {
			return {
				userQuestion: '',
				allMessage: [
					// {
					// 	"index": 1,
					// 	"content": "1你好",
					// 	"from": 1,
					// 	"loading": 0,
					// 	"last": 0,
					// 	"id": 0,
					// 	"praise": 0,
					// 	"trample": 0
					// },
					// {
					// 	"index": 2,
					// 	"content": "1今年以来，人工智能（AI）技术继续保持迅猛发展态势。全球多家科技公司竞相发布AI模型的最新版本，这些模型具备更快速的回答能力、更强的多模态能力以及增强的推理与生成能力等，将为用户带来更加智能的使用体验，为各行各业注入新动能。",
					// 	"from": 2,
					// 	"loading": 0,
					// 	"last": 0,
					// 	"id": 0,
					// 	"praise": 0,
					// 	"trample": 0
					// },
					// {
					// 	"index": 3,
					// 	"content": "2你好",
					// 	"from": 1,
					// 	"loading": 0,
					// 	"last": 0,
					// 	"id": 0,
					// 	"praise": 0,
					// 	"trample": 0
					// },
					// {
					// 	"index": 4,
					// 	"content": "2今年以来，人工智能（AI）技术继续保持迅猛发展态势。全球多家科技公司竞相发布AI模型的最新版本，这些模型具备更快速的回答能力、更强的多模态能力以及增强的推理与生成能力等，将为用户带来更加智能的使用体验，为各行各业注入新动能。\n美国知名企业家马斯克旗下的xAI公司2月17日正式发布最新AI模型Grok 3，该模型引入了包括图像分析和问答在内的高级功能，支持社交媒体平台X上的各种功能。马斯克称，Grok 3是“地球上最聪明的AI”和“最大程度寻求事实真相的AI”。在功能演示环节，Grok 3模型以及Grok 3 mini版本在数学、科学和编程基准测试上超越了目前所有主流模型。\n美国谷歌公司2月5日宣布推出多个“双子座2.0”系列模型的优化版本，其中包括“双子座2.0闪电”模型以及该模型的经济版和实验版，所有这些模型都将提供多模态输入与文本输出。据谷歌官方博客介绍，此次更新进一步增强了“双子座2.0”系列模型在多模态推理、编码性能和处理复杂提示等方面的能力，并提升了成本效益。",
					// 	"from": 2,
					// 	"loading": 0,
					// 	"last": 0,
					// 	"id": 0,
					// 	"praise": 0,
					// 	"trample": 0
					// }
				]
			}
		},
		methods: { //方法集合
			send() {
				let content = this.userQuestion;
				let message = {
					"index": this.allMessage.length,
					"content": content,
					"from": 1,
					"loading": 0,
					"last": 1,
					"id": 0,
					"praise": 0,
					"trample": 0
				};
				this.allMessage.push(message);
				this.userQuestion = "";

				this.requestQuestion(content);
			},
			requestQuestion(question) {
				let _self = this;
				let message = {
					"index": this.allMessage.length,
					"content": "",
					"from": 2,
					"loading": 1,
					"last": 1,
					"praise": 0,
					"trample": 0
				};
				_self.allMessage.push(message);
				_self.scrollToBottom();
				let messageObj = _self.getLastAssistantMessage();

				setTimeout(async function() {
					let params = {
						"model": "Qwen2.5:7b",
						"content": question,
						"chatId": "chatid123",
						"stream": true,
						"detail": false,
						"token": "token123123213213"
					};
					const controller = new AbortController();
					const {
						signal
					} = controller;
					let url = 'http://127.0.0.1:8081/api/chatGpt/completions';
					_self.eventSource = await fetchEventSource(
						url, {
							heartbeatTimeout: 60 * 60 * 1000, // 设置重连时间
							method: 'POST',
							headers: {
								"Content-Type": 'application/json',
							},
							body: JSON.stringify(params),
							onopen(e) {
								console.log("已建立SSE连接~" + e)
							},
							onmessage(e) {
								let value = e.data;
								console.log(value);
								let valueJson = JSON.parse(value);
								messageObj.content += valueJson.message.content;
								messageObj.loading = 0;

								if (valueJson.done) {
									controller.abort();
								}
								_self.scrollToBottom();
							},
							onclose() {
								messageObj.loading = 0;
								controller.abort();
							},
							onerror(e) {
								messageObj.loading = 0;
								if (e.readyState === EventSource.CLOSED) {
									console.log("connection is closed");
								} else {
									console.log("Error occured11111", e);
								}
								e.target.close();
							},
							signal
						});
				});
			},
			getLastAssistantMessage() {
				for (let i = this.allMessage.length - 1; i > 0; i--) {
					if (this.allMessage[i].from == 2) {
						return this.allMessage[i];
					}
				}
				return null;
			},
			scrollToBottom() {
				let div = this.$refs.idChatBody;
				div.scrollTop = div.scrollHeight;
			},
			isEmpty(variable1) {
				if (variable1 == null || variable1 == undefined || variable1 == '' || variable1 == 'undefined') {
					return true;
				} else {
					return false;
				}
			}
		},
		destroyed() {
			window.removeEventListener('scroll', this.handleScroll)
		} //生命周期 - 销毁完成
	}
</script>

<style>
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color: #2c3e50;
	}

	body {
		margin: 0;
		padding: 0;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	/**滚动条样式 */
	::-webkit-scrollbar {
		/*滚动条整体样式*/
		width: 3px;
		/*高宽分别对应横竖滚动条的尺寸*/
		height: 1px;
	}

	::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 3px;
		box-shadow: inset 0 0 3px #BB7626;
	}

	::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		box-shadow: inset 0 0 3px #f3f3f3;
		border-radius: 3px;
	}

	.chatBody {
		background-image: linear-gradient(180deg, #FDF6EB 2%, #FFFBF7 46%, #FDF6EB 59%, #FDF0E4 99%);
		width: 100%;
		height: 100vh;
		overflow-x: hidden;
	}

	.chatArea {
		padding-left: 3%;
		padding-right: 13px;
		padding-bottom: 10px;
		overflow-y: auto;
		overflow-x: hidden;
		float: left;
		width: 93.5%;
		margin-bottom: 75px;
	}

	.userChatGround {
		background-image: linear-gradient(90deg, #E3B278 0%, #C48134 100%);
		border-radius: 13px 13px 0px 13px;
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #FFFFFF;
		letter-spacing: 0;
		font-weight: 500;
		padding: 10px 15px;
		float: right;
		text-align: left;
		margin-top: 15px;
	}

	.assistantChatItem {
		float: left;
		width: 80%;
		margin-top: 15px;
		text-align: left;
		border-radius: 0px 13px 13px 13px;
		background-color: #FFFFFF;
		border: solid 1px #BB7626;
		color: #242424;
		padding: 10px 15px;
	}

	.inputSendGround {
		height: 50px;
		bottom: 0;
		position: absolute;
		width: 100%;
	}

	.inputSendGround_area {
		box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.5);
		box-shadow: 0px -2px 40px 14px rgba(215, 173, 115, 0.27);
		border-radius: 28px 28px 0px 0px;
		padding: 10px 5px;
		background: #FFEFD9;
		display: flex;
		flex-direction: row;
	}

	.inputSendGround_area_input {
		background: #FFFFFF;
		border-radius: 25px;
		font-size: 15px;
		color: #333;
		border: 1px solid #BB7626;
		padding: 10px 15px;
		outline: none;
		flex: auto;
	}

	.sendButton {
		border-radius: 20px;
		background-color: #FFFFFF;
		border: solid 1px #BB7626;
		color: #242424;
		padding: 5px 15px;
		margin-left: 10px;
	}
</style>